define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var d3 = require('d3')

  var bubbles = require('./bubble')

  require('css!../style.css')

  var cegTmpl = require('tmpl/ceg/index')

  const args = {
    "0": [
      {
        "name": "应用状态灯",
        "value": 356,
        "originValue": 356,
        "color": "#f26f92",
        "colorHslArr": [
          344,
          83.4,
          69.2
        ]
      },
      {
        "name": "数据库",
        "value": 260,
        "originValue": 260,
        "color": "#13d1c1",
        "colorHslArr": [
          175,
          83.3,
          44.7
        ]
      },
      {
        "name": "小型机",
        "value": 219,
        "originValue": 219,
        "color": "#e3dc1b",
        "colorHslArr": [
          58,
          78.7,
          49.8
        ]
      },
      {
        "name": "网络设备",
        "value": 180,
        "originValue": 180,
        "color": "#637bff",
        "colorHslArr": [
          231,
          100,
          69.4
        ]
      },
      {
        "name": "防火墙",
        "value": 145,
        "originValue": 145,
        "color": "#90ed7e",
        "colorHslArr": [
          110,
          75.5,
          71.2
        ]
      },
      {
        "name": "安全设备",
        "value": 126,
        "originValue": 126,
        "color": "#1970fc",
        "colorHslArr": [
          217,
          97.4,
          54.3
        ]
      },
      {
        "name": "大型机",
        "value": 68,
        "originValue": 68,
        "color": "#f79628",
        "colorHslArr": [
          32,
          92.8,
          56.3
        ]
      },
      {
        "name": "服务器",
        "value": 50,
        "originValue": 50,
        "color": "#ab5ee6",
        "colorHslArr": [
          274,
          73.1,
          63.5
        ]
      },
      {
        "name": "交换机",
        "value": 44.5,
        "originValue": 26,
        "color": "#02a8f5",
        "colorHslArr": [
          199,
          98.4,
          48.4
        ]
      },
      {
        "name": "中间件",
        "value": 44.5,
        "originValue": 18,
        "color": "#22d47e",
        "colorHslArr": [
          151,
          72.4,
          48.2
        ]
      }
    ],
    "1": 800,
    "2": 600,
    "3": {},
    "4": {},
    "5": 0.06729189485213581,
    "6": false,
    "7": true
  }
  
  function main() {
    const $app = $('<div id="app">');
    $('#main').html($app);
    
    if (0) {

        $app.append('<svg id="svg" width="960" height="960" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>')

        var svg = d3.select("#svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");

        var format = d3.format(",d");

        var color = d3.scaleOrdinal(d3.schemeCategory20c);

        var pack = d3.pack()
            .size([width, height])
            // .radius(function(d) {
            //     console.log(d)
            //   return 30 + (1/1000 * d.value);
            // })
            .padding(1.5);

        d3.csv("./v/graph/data/flare.csv", function(d) {
            d.value = +d.value;
            if (d.value) return d;
        }, function(error, classes) {
            if (error) throw error;

            var root = d3.hierarchy({children: classes})
                .sum(function(d) { return d.value; })
                .each(function(d) {
                    if (id = d.data.id) {
                        var id, i = id.lastIndexOf(".");
                        d.id = id;
                        d.package = id.slice(0, i);
                        d.class = id.slice(i + 1);
                    }
                });

        //        var minR

            var node = svg.selectAll(".node")
                .data(pack(root).leaves())
                .enter().append("g")
        //            .attr("font-size", function(d) {
        //                if (!minR || (minR && minR > d.r)) {
        //                    minR = d.r
        //                }
        //            })

            node.attr("class", "node")
                .attr("transform", function(d) {
        //                var scale = 15 / minR;
        //                var scale = 1;
                    return "translate(" + d.x + "," + d.y + ")";
                });

            node.append("circle")
                .attr("id", function(d) { return d.id; })
                .attr("r", function(d) {
        //                var scale = 1;
        //                var scale = 15 / minR;
                    return d.r;
                })
                .style("fill", function(d) { return color(d.package); });

            node.append("text")
                .attr("class", "label")
        //            .selectAll("tspan")
        //            .data(function(d) {
        //                return d.class.split(/(?=[A-Z][^A-Z])/g);
        //            })
        //            .enter().append("tspan")
        //            .attr("x", 0)
        //            .attr("y", function(d, i, nodes) {
        //                return 13 + (i - nodes.length / 2 - 0.5) * 10;
        //            })
                .attr("y", -10)
                // .attr("font-size", 12)
                // .attr("transform", function (d) {
                //     var len = getStrLen(d.class);
                //     var fontSize = +(d.r * 2) / len;
                //     return "scale(" + (fontSize / 12) + ")";
                // })
                .text(function(d) { return d.class; });

            node.append("text")
                .attr("class", "count")
                .attr("y", 10)
                .attr("font-weight", "bold")
                // .attr("font-size", 12)
                // .attr("transform", function (d) {
                //     var len = getStrLen(d.value.toString());
                //     var fontSize = (d.r * 2) / len
                //     return "scale(" + (fontSize / 12) + ")";
                // })
                .text(function(d) { return format(d.value); });
        });


        /**
         * 统计字数，英文算1个，中文算2个
         * @param  {[type]} str [description]
         * @return {[type]}     [description]
         */
        function getStrLen(str) {
            if (typeof str !== 'string') {
                return 0
            }
            let myLen = 0
            for (let i = 0; i < str.length; i++) {
                if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
                    myLen++
                } else {
                    myLen += 2
                }
            }
            return myLen
        }
    }

    $el = $('<div class="rel box">').width(args['1']).height(args['2'])
    const $container = $('<div />')
    $el.append($container)

    $app.append($el);

    const hideElem = document.createElement('text')
    hideElem.style.opacity = 0
    $app.append(hideElem);

    var html = cegTmpl(1, 2, 1, '对气泡图排序算法的研究');
    $app.append(html);
    
    const { gravity, isTransform } = parseGravity(args["1"], args["2"])
    const plot = bubbles(args["0"], args["1"], args["2"], $container[0], hideElem, gravity, isTransform, args["7"])
    d3.select($container[0])
      .datum(args["0"])
      .call(plot)
  }

  /**
   * [解析气泡图布局的分布系数]
   * @return {[type]} [description]
   */
  function parseGravity(width, height) {
    // let increment = 128; //设定(w/h)每次可调整的单位
    // let graityIncrement = 0.1; //设定分布系数每次可调整的增量

    // //先假设一个格子所占像素是1*1，则16：9的布局下，组件宽高比的范围是【0，128】
    // let n = (128 - 0) / increment //表示对应可以有几份移动

    // //分布系数的范围是【0，0.1】（0.1是正圆，0是最大限度的椭圆）
    // let p = (0.1 - 0) / graityIncrement //表示对应可以有几份系数变化

    // let gravity = 0.1 - (p / n) * (width / height / increment) * graityIncrement; // 需要用来布局的系数

    let gravity,
      isTransform = false
    let aspectRatio = width / height
    if (aspectRatio < 0.2) {
      gravity = 0.001
    } else if (aspectRatio >= 0.2 && aspectRatio < 1) {
      // [0.2, 1)区间，是一个线性函数y=kx+b;(此公式是通过点代进去计算得出)
      gravity = 0.1 * aspectRatio - 0.01
    } else if (aspectRatio === 1) {
      //正圆
      gravity = 0.1
    } else if (aspectRatio > 1 && aspectRatio <= 2.6) {
      //（1, 2.6]区间，是一个线性函数y=kx+b;(此公式是通过点代进去计算得出)
      gravity = -0.05 * aspectRatio + 0.15
    } else if (aspectRatio > 2.6 && aspectRatio <= 4) {
      gravity = 0.01
    } else if (aspectRatio > 4) {
      gravity = 0.001
    }

    //需要旋转
    if (aspectRatio < 1) {
      isTransform = true //标记旋转
    }
    return { gravity, isTransform }
  }

  return main;
})
